<script>
// Create the tooltips only on document load
jQuery(document).ready(function()
{
	// Make sure to only match links to wikipedia with a rel tag
	jQuery('a[href*=wikipedia.org/][rel]').each(function()
	{
		// We make use of the .each() loop to gain access to each element via the "this" keyword...
		jQuery(this).qtip(
		{
			content: {
				// Set the text to an image HTML string with the correct src URL to the loading image you want to use
				text: '<img class="throbber" src="/projects/qtip/images/throbber.gif" alt="Loading..." />',
				ajax: {
					url: jQuery(this).attr('rel') // Use the rel attribute of each element for the url to load
				},
				title: {
					text: 'Wikipedia - ' + jQuery(this).text(), // Give the tooltip a title using each elements text
					button: true
				}
			},
			position: {
				at: 'bottom center', // Position the tooltip above the link
				my: 'top center',
				viewport: jQuery(window), // Keep the tooltip on-screen at all times
				effect: false // Disable positioning animation
			},
			show: {
				event: 'click',
				solo: true // Only show one tooltip at a time
			},
			hide: 'unfocus',
			style: {
				classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow'
			}
		})
	})
 
	// Make sure it doesn't follow the link when we click it
	.click(function(event) { event.preventDefault(); });
});

jQuery('.hasTooltip').each(function() { // Notice the .each() loop, discussed below
    jQuery(this).qtip({
        content: {
            text: jQuery(this).next('div') // Use the "div" element next to this for the content
        }
    });
});


</script>